<template>
  <div>
    <el-card>
      <div class="jzrglk">
        <div>挂号详情</div>
        <div></div>
      </div>
      <div style="margin-bottom: 10px">
        <el-tag>{{ obj1.orderStatusString }}</el-tag>
      </div>
      <div class="detail">
        <div style="width: 48%">
          <el-descriptions style="width: 100%" :column="1" border>
            <el-descriptions-item
              label="就诊人信息"
              label-align="right"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
              width="150px"
              >{{ obj.patientName }}</el-descriptions-item
            >
            <el-descriptions-item
              label="就诊日期"
              label-align="right"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
              width="150px"
              >{{ obj.reserveDate }}</el-descriptions-item
            >
            <el-descriptions-item
              label="就诊医院"
              label-align="right"
              align="center"
              >{{ obj.hosname }}</el-descriptions-item
            >
            <el-descriptions-item
              label="就诊科室"
              label-align="right"
              align="center"
              >{{ obj.depname }}</el-descriptions-item
            >

            <el-descriptions-item
              label="医生职称"
              label-align="right"
              align="center"
            >
              <el-tag size="small">{{ obj.title }}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item
              label="医生服务"
              label-align="right"
              align="center"
            >
              <span style="color: red">{{ obj.amount }}</span>
            </el-descriptions-item>

            <el-descriptions-item
              label="挂号单号"
              label-align="right"
              align="center"
            >
              <el-tag size="small">{{ obj.outTradeNo }}</el-tag>
            </el-descriptions-item>

            <el-descriptions-item
              label="挂号时间"
              label-align="right"
              align="center"
            >
              <el-tag size="small">{{ obj.createTime }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
          <el-button type="primary" v-if="obj1.orderStatusString!=='已支付'" style="margin-top: 10px" @click="zhifu()"
            >支付</el-button
          >
        </div>
        <div style="width: 50%">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>注意事项</span>
              </div>
            </template>
            <p>
              1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
            </p>
            <p style="color: red">
              2.【取号】就诊当天需在{{ obj.fetchTime }}前
              在医院取号，未取号视为爽约，该号不退不换；
            </p>
            <p>
              3.【退号】在{{ obj.quitTime }}前可在线退号
              ，逾期将不可办理退号退费；
            </p>
            <p>
              4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
            </p>
            <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
          </el-card>
        </div>
      </div>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="支付"
      width="30%"
      :before-close="handleClose"
    >
      <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto"></div>
      <p>请使用微信扫码支付</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import QRCode from "qrcodejs2-fix";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import instance from "../assets/axios";
const router = useRouter();
const dialogVisible = ref(false);
const handleClose = () => {
    
  dialogVisible.value = false;

  clearInterval(time.value);
};
const obj = ref({});
const time = ref();
const qrCodeUrl = ref(null);
const obj1 = ref({});
const zhifu = async () => {
  qrCodeUrl.value = null;
  dialogVisible.value = true;
  const res = await instance.get(
    `/api/order/weixin/createNative/${router.currentRoute.value.query.orderId}`
  );
  console.log(res);

  var qrcode = new QRCode(qrCodeUrl.value, {
    text: res.data.codeUrl, // 需要转换为二维码的内容
    width: 100,
    height: 100,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H,
  });
  time.value = setInterval(async () => {
    const res1 = await instance.get(
      `/api/order/weixin/queryPayStatus/${router.currentRoute.value.query.orderId}`
    );
    console.log(res1);
    if (res1.data == true) {
      clearInterval(time.value);
      dialogVisible.value = false;
      getdata()
      ElMessage({
        message: "支付成功",
        type: "success",
        duration: 3 * 1000,
      });
    }
  }, 2000);
};
const getdata = async () => {
  const res = await instance.get(
    `/api/order/orderInfo/auth/getOrderInfo/${router.currentRoute.value.query.orderId}`
  );
  console.log(res);
  obj.value = res.data;
  obj1.value = res.data.param;
};
onMounted(() => {
  getdata();
});
</script>
<style scoped>
.detail {
  width: 100%;
  height: auto;
  padding-top: 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e5e5e5;
}
.jzrglk {
  width: 100%;
  height: auto;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
  align-content: center;
}
</style>